<template>
    <div>
     	<div class="header1">
     	    <span>项目信息</span>
     	    <el-divider content-position="right"></el-divider>
     	</div>
     	<div class="content1" v-loading="loading">
     		
     			<el-row class="content1Title" type="flex"  align="middle" >
     				<el-col :span="2"  :offset="1"><span>项目名称</span>
     				<el-divider direction="vertical"></el-divider>
     				</el-col>
     				<el-col :span="3"  :offset="1"><span>项目负责人</span>
     				<el-divider direction="vertical"></el-divider>
     				</el-col>
     				<el-col :span="2"   :offset="1"><span>项目类型</span>
     				<el-divider direction="vertical"></el-divider>
     				</el-col>
     				<el-col :span="6"   :offset="2"><span>项目简介</span>
     				<el-divider direction="vertical"></el-divider></el-col>
     				<el-col :span="5"   :offset="1"><span>项目成员</span>
     				<el-col :span="1" ></el-col>
     				<el-divider direction="vertical"></el-divider></el-col>
     			</el-row>
     				<template v-for="(item,n) in proData">
     					<el-divider :key="n"></el-divider>
     					<el-row  :key="item.index" style="margin-bottom: 1.75rem;" type="flex"  align="middle">
     						<el-col :span="2"  :offset="1">{{item.ProName}}</el-col>
     						<el-col :span="2"  :offset="1">{{item.leader}}</el-col>
     						<el-col :span="2"  :offset="1">{{item.type}}</el-col>
     						<el-col :span="6"   :offset="1">{{item.ProInfo}}</el-col>
     						<el-col :span="3"   :offset="2" ><span v-for="e in item.members" :key="e">{{e.name}}<br></span></el-col>
     						<el-col :span="1" ><el-button icon="el-icon-delete" type="danger" @click="quiteProject(item.id)" circle></el-button></el-col>
     					</el-row>
     				</template>
     			<el-row  type="flex"  align="middle" justify="center">
     				<el-col :span="5">
     					<el-pagination
     						@current-change = "getPartProject"
     						@prev-click = "getPartProject"
     						@next-click = "getPartProject"
     						background
     						page-size="5"
     						layout="prev, pager,next "
     						:total="total">
     					</el-pagination>
     				</el-col>
     			</el-row>
     	</div>
    </div>
</template>

<script>
	
	
export default {
	
    props:{
    		 proData:{
    		        type:Array 
    		    }
    },
   
    data:function () {
		
        
		return{
			total:0,
			loading:false
			}
	},
    
    
    methods:{
		quiteProject: function(n){
			this.$confirm('确认退出？', '确认信息', {
				distinguishCancelAndClose: true,
				confirmButtonText: '确认',
				cancelButtonText: '取消'
			})
			.then(async () => {
				this.loading = true;
				let res = await this.text(this.$api.quiteProject+"?id="+n)
				
				if (res.code === 200) {
					this.$message({
						message: '退出成功',
						type: 'success'
						});
					location.reload();
					
				}else if(res.code === 50033){
					this.$message.error('你是项目创建者');
				} else{
						this.$message.error('请求失败或者接口返回失败');
				} 
				this.loading = false;
			});
		},
		getPartProject : async function(n){
			this.proData.length=0
			this.proData.push()
			if(this.$GLOBAL.isLogin){
				this.loading = true;
				let res = await this.text(this.$api.getNumProject+"?isGetPart=1","","get")
				
				if (res.code === 200) {
					this.total = res.data.num
					// 
				}else{
					this.$message.error('请求失败或者接口返回失败');
				}
				
				let beg = (n-1) * 5
				let end = n * 5
				
				res = await this.text(this.$api.showManyProject+"?page="+beg+"&num="+end+"&isGetPart=true","","get")
				
				if (res.code === 200) {
					let _this =this
					res.data.forEach(e => {
						let temp = []
						this.proData.push({
							id:e.project.id,
							ProName:e.project.name,
							ProInfo:e.project.introduce,
							members:e.members,
							type:e.project.type,
							userNum:e.project.userNum,
							teacher:e.project.instructor,
							time:this.$dateFormat(e.project.createTime),
							leader:e.project.leader.name
					})
					});
				}else{
					 this.$message.error('请求失败或者接口返回失败');
				 }
				 this.loading = false;
			}
			
		},
           
    },
	created() {
		this.getPartProject(1)
	}
}
</script>

<style scoped>
	@import url("../assets/style/info.css");
</style>
